<style>
  .pseudo::before {
    position: absolute;
    left: 0;
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    content: '';
  }
  .background {
    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png');
  }
  .inputv {
    text-align: center;
  }
</style>

<div>
  <img
    id="png"
    src="https://gw.alipayobjects.com/zos/rmsportal/mZBWtboYbnMkTBaRIuWQ.png"
    style="width: 200px; height: 200px;"
  />
  <div
    id="background-image"
    class="background"
    style="width: 200px; height: 200px;"
  ></div>

  <div id="default" style="background: aliceblue;">123</div>

  <div id="pseudo" class="pseudo"></div>

  <canvas id="canvas" style="width: 100px; height: 100px;"></canvas>

  <input id="input" placeholder="请输入" />

  <div id="row-text" style="padding: 16px 24px;">
    规划应用 <a>全局设置</a>
    <span
      role="img"
      aria-label="right"
      class="anticon anticon-right"
      style="color: rgba(0, 0, 0, 0.25);"
      ><svg
        viewBox="64 64 896 896"
        focusable="false"
        class=""
        data-icon="right"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141V218.3C302 223.20000000000002 304.3 227.9 308.1 230.9L668.1 512L308.1 793.1C304.20000000000005 796.1 302 800.8000000000001 302 805.7V883C302 889.7 309.7 893.4 314.9 889.3L765.7 537.1999999999999A31.96 31.96 0 0 0 765.7 486.79999999999995z"
          style="
            color: rgba(0, 0, 0, 0.25);
            font-size: 14px;
            font-variant: tabular-nums;
            text-decoration: none solid rgba(0, 0, 0, 0.25);
            fill: rgba(0, 0, 0, 0.25);
            text-rendering: optimizeLegibility;
          "
        ></path></svg
    ></span>
    创建应用 <a>应用管理</a>
    <span
      role="img"
      aria-label="right"
      class="anticon anticon-right"
      style="color: rgba(0, 0, 0, 0.25);"
      ><svg
        viewBox="64 64 896 896"
        focusable="false"
        class=""
        data-icon="right"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141V218.3C302 223.20000000000002 304.3 227.9 308.1 230.9L668.1 512L308.1 793.1C304.20000000000005 796.1 302 800.8000000000001 302 805.7V883C302 889.7 309.7 893.4 314.9 889.3L765.7 537.1999999999999A31.96 31.96 0 0 0 765.7 486.79999999999995z"
          style="
            color: rgba(0, 0, 0, 0.25);
            font-size: 14px;
            font-variant: tabular-nums;
            text-decoration: none solid rgba(0, 0, 0, 0.25);
            fill: rgba(0, 0, 0, 0.25);
            text-rendering: optimizeLegibility;
          "
        ></path></svg
    ></span>
    配置资源 <a>应用实例</a>
    <span
      role="img"
      aria-label="right"
      class="anticon anticon-right"
      style="color: rgba(0, 0, 0, 0.25);"
      ><svg
        viewBox="64 64 896 896"
        focusable="false"
        class=""
        data-icon="right"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141V218.3C302 223.20000000000002 304.3 227.9 308.1 230.9L668.1 512L308.1 793.1C304.20000000000005 796.1 302 800.8000000000001 302 805.7V883C302 889.7 309.7 893.4 314.9 889.3L765.7 537.1999999999999A31.96 31.96 0 0 0 765.7 486.79999999999995z"
          style="
            color: rgba(0, 0, 0, 0.25);
            font-size: 14px;
            font-variant: tabular-nums;
            text-decoration: none solid rgba(0, 0, 0, 0.25);
            fill: rgba(0, 0, 0, 0.25);
            text-rendering: optimizeLegibility;
          "
        ></path></svg
    ></span>
    部署应用 <a>发布部署</a>
    <span
      role="img"
      aria-label="right"
      class="anticon anticon-right"
      style="color: rgba(0, 0, 0, 0.25);"
      ><svg
        viewBox="64 64 896 896"
        focusable="false"
        class=""
        data-icon="right"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141V218.3C302 223.20000000000002 304.3 227.9 308.1 230.9L668.1 512L308.1 793.1C304.20000000000005 796.1 302 800.8000000000001 302 805.7V883C302 889.7 309.7 893.4 314.9 889.3L765.7 537.1999999999999A31.96 31.96 0 0 0 765.7 486.79999999999995z"
          style="
            color: rgba(0, 0, 0, 0.25);
            font-size: 14px;
            font-variant: tabular-nums;
            text-decoration: none solid rgba(0, 0, 0, 0.25);
            fill: rgba(0, 0, 0, 0.25);
            text-rendering: optimizeLegibility;
          "
        ></path></svg
    ></span>
    监控运维
    <a
      >监控分析平台
      <span role="img" aria-label="link" class="anticon anticon-link"
        ><svg
          viewBox="64 64 896 896"
          focusable="false"
          class=""
          data-icon="link"
          width="1em"
          height="1em"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            d="M574 665.4A8.03 8.03 0 0 0 562.7 665.4L446.5 781.6C392.7 835.4 301.9 841.1 242.5 781.6C183 722.1 188.7 631.4000000000001 242.5 577.6L358.7 461.40000000000003C361.8 458.3 361.8 453.20000000000005 358.7 450.1L318.9 410.3A8.03 8.03 0 0 0 307.59999999999997 410.3L191.4 526.5C106.80000000000001 611.1 106.80000000000001 748 191.4 832.5S412.9 917.1 497.4 832.5L613.6 716.3C616.7 713.1999999999999 616.7 708.0999999999999 613.6 705L574 665.4zM832.6 191.39999999999998C748 106.79999999999998 611.1 106.79999999999998 526.6 191.39999999999998L410.3 307.6A8.03 8.03 0 0 0 410.3 318.90000000000003L450 358.6C453.1 361.70000000000005 458.2 361.70000000000005 461.3 358.6L577.5 242.40000000000003C631.3 188.60000000000002 722.1 182.90000000000003 781.5 242.40000000000003C841 301.90000000000003 835.3 392.6 781.5 446.40000000000003L665.3 562.6A8.03 8.03 0 0 0 665.3 573.9L705.0999999999999 613.6999999999999C708.1999999999999 616.8 713.3 616.8 716.3999999999999 613.6999999999999L832.5999999999999 497.49999999999994C917.0999999999999 412.9 917.0999999999999 275.99999999999994 832.5999999999999 191.39999999999992zM610.1 372.3A8.03 8.03 0 0 0 598.8000000000001 372.3L372.3 598.7A8.03 8.03 0 0 0 372.3 610L411.90000000000003 649.6C415.00000000000006 652.7 420.1 652.7 423.20000000000005 649.6L649.6 423.20000000000005C652.7 420.1 652.7 415.00000000000006 649.6 411.90000000000003L610.1 372.3z"
            style="
              color: rgb(24, 144, 255);
              font-size: 14px;
              font-variant: tabular-nums;
              text-decoration: none solid rgb(24, 144, 255);
              cursor: pointer;
              fill: rgb(24, 144, 255);
              text-rendering: optimizeLegibility;
            "
          ></path></svg></span
    ></a>
  </div>

  <svg
    id="use-svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="14"
    height="14"
  >
    <defs>
      <path id="a" d="M5.7 8.3L2.9 5.5 1.5 6.9l4.2 4.2 6.4-6.4-1.4-1.4-5 5z" />
    </defs>
    <use
      xlink:href="#a"
      overflow="visible"
      fill-rule="evenodd"
      clip-rule="evenodd"
      fill="#fff"
    />
  </svg>

  <input id="input-center" type="text" value="123456" class="inputv" />
</div>
